<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            font-size: 15px;
        }

        .right {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="input1"><span class="msg1">请输入用户名</span><br><br>
    <input type="text" class="input2"><span class="msg2">请输入用户名</span><br><br>
    <input type="text" class="input3"><span class="msg3">请输入邮箱</span>


    <script>
        const input1Obj = document.querySelector(".input1")
        const input2Obj = document.querySelector(".input2")
        const input3Obj = document.querySelector(".input3")

        const msg1Obj = document.querySelector(".msg1")
        const msg2Obj = document.querySelector(".msg2")
        const msg3Obj = document.querySelector(".msg3")
        //验证用户名的正则
        const re1 = /^[\w]{6,10}$/;

        //验证手机号的正则,第一位是1 后面的10位是0-9
        const re2 = /^[1](50|35|39)[\d]{8}$/ //不加上 $ 限制结尾，就是只要超过10的都满足条件

        //验证邮箱的正则
        const re3 = /^[\w]@.com$/
        // const re3 = /^[\w]{3,8}@(qq|163).com$/

        input1Obj.addEventListener("blur", function () {
            //对用户名进行校验
            if (re1.test(this.value)) {
                //满足条件
                msg1Obj.className = 'right'
                msg1Obj.innerHTML = "输入正确"

            } else {
                msg1Obj.className = 'error'
                msg1Obj.innerHTML = "输入错误"
            }
        })

        input2Obj.addEventListener("blur", function () {
            //对手机号进行校验
            if (re2.test(this.value)) {
                //满足条件
                msg2Obj.className = 'right'
                msg2Obj.innerHTML = "输入正确"

            } else {
                msg2Obj.className = 'error'
                msg2Obj.innerHTML = "输入错误"
            }
        })

        input3Obj.addEventListener("blur", function () {
            //对手机号进行校验
            if (re3.test(this.value)) {
                //满足条件
                msg3Obj.className = 'right'
                msg3Obj.innerHTML = "输入正确"

            } else {
                msg3Obj.className = 'error'
                msg3Obj.innerHTML = "输入错误"
            }
        })
    </script>
</body>

</html>